<template>
    <div>
        <!--新增和搜索框-->
        <v-layout row wrap>
            <v-flex xs6>
                <v-btn round color="primary" dark>品牌添加嗷</v-btn>
            </v-flex>
            <v-flex xs6>
                <v-text-field
                        label="搜索"
                        prepend-icon="search"
                ></v-text-field>
            </v-flex>
        </v-layout>

        <!--列表-->
        <v-data-table
                :headers="headers"
                :items="desserts"
                :pagination.sync="pagination"
                :total-items="totalDesserts"
                :loading="loading"
                class="elevation-1"
        >
            <!--
            slot="items" 指定要遍历的数据
            slot-scope="props" 把当前遍历的数据起个别名
            -->
            <template slot="items" slot-scope="props">
                <td class="text-xs-center">{{ props.item.id }}</td>
                <td class="text-xs-center">{{ props.item.name }}</td>
                <td class="text-xs-center">{{ props.item.image }}</td>
                <td class="text-xs-center">{{ props.item.letter }}</td>
            </template>
        </v-data-table>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                totalDesserts: 0,  // 总记录数
                desserts: [],      // 当前页的数据列表
                loading: true,     // 加载进度条的特效
                pagination: {},    // 分页插件
                headers: [         // 表头信息
                    {text: '品牌编号', align: 'center', value: 'id'},
                    {text: '品牌名称', align: 'center', value: 'name'},
                    {text: '品牌图片', align: 'center', sortable: false, value: 'image'},
                    {text: '品牌字母', align: 'center', value: 'letter'}
                ]
            }
        },
        watch: {
            pagination: {
                handler() {
                    this.getDataFromApi()
                        .then(data => {
                            this.desserts = data.items
                            this.totalDesserts = data.total
                        })
                },
                deep: true
            }
        },
        mounted() {
            this.getDataFromApi()
                .then(data => {
                    this.desserts = data.items
                    this.totalDesserts = data.total
                })
        },
        methods: {
            getDataFromApi() {
                this.loading = true
                return new Promise((resolve, reject) => {
                    const {sortBy, descending, page, rowsPerPage} = this.pagination

                    let items = this.getDesserts()
                    const total = items.length

                    if (this.pagination.sortBy) {
                        items = items.sort((a, b) => {
                            const sortA = a[sortBy]
                            const sortB = b[sortBy]

                            if (descending) {
                                if (sortA < sortB) return 1
                                if (sortA > sortB) return -1
                                return 0
                            } else {
                                if (sortA < sortB) return -1
                                if (sortA > sortB) return 1
                                return 0
                            }
                        })
                    }

                    if (rowsPerPage > 0) {
                        items = items.slice((page - 1) * rowsPerPage, page * rowsPerPage)
                    }

                    setTimeout(() => {
                        this.loading = false
                        resolve({
                            items,
                            total
                        })
                    }, 1000)
                })
            },
            getDesserts() {
                return [
                    {id: 2032, name: "OPPO", image: "1.jpg", letter: "O"},
                    {id: 2033, name: "飞利浦", image: "2.jpg", letter: "F"},
                    {id: 2034, name: "华为", image: "3.jpg", letter: "H"},
                    {id: 2036, name: "酷派", image: "4.jpg", letter: "K"},
                    {id: 2037, name: "魅族", image: "5.jpg", letter: "M"}
                ]
            }
        }
    }
</script>